<template>
  <van-popup :value="value" @input="$emit('input',$event)" @open="isReport=false">
    <van-cell-group v-if="!isReport">
      <van-cell @click='disLike'>不感兴趣</van-cell>
      <van-cell is-link @click="isReport=true">反馈垃圾内容</van-cell>
      <van-cell>拉黑作者</van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport=false">返回</van-cell>
      <van-cell @click='report(item.value)' icon="info-o" :key='item.value' v-for='item in reports'>{{item.label}}</van-cell>
    </van-cell-group>
  </van-popup>
</template>

<script>
import { disLike, report } from '@/api/channel.js'
import { reports } from '@/utils/constant.js'

export default {
  name: 'MoreAction',
  props: {
    value: {
      type: Boolean
    },
    articleId: {
      type: String
    }
  },
  data () {
    return {
      isReport: false,
      reports: reports
    }
  },
  methods: {
    async report (type) {
      try {
        await report({
          target: this.articleId,
          type: type
        })
        // 通知父组件删除该文章
        this.$emit('action-success')
      } catch (e) {
        console.log(e)
        this.$toast.fail('操作失败！')
      }
    },
    async disLike () {
      try {
        await disLike(this.articleId)
        // 关闭弹窗，通知父组件删除这个文章
        this.$emit('action-success')
      } catch (e) {
        console.log(e)
        this.$toast.fail('操作失败！')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>
